<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        pre {
            display: block;
            padding: 9.5px;
            margin: 0 0 10px;
            font-size: 18px;
            line-height: 1.42857143;
            color: #333;
            word-break: break-all;
            word-wrap: break-word;
            background-color: #00aaaa;
            border-radius: 12px;
        }
        .hide{
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div style="width: 600px;height: 574px;margin: auto;margin-top: 20px;">
        <div class="panel panel-success">
            <div class="panel-heading">在线客服</div>
            <div class="panel-body">
                <div style="border: #f5f5f5 2px solid;width: 570px;height: 400px;overflow:scroll;">
                    <div id="content">
                        <!-- 聊天记录 -->
                    </div>
                </div>
                <div style="border-color: white;margin-top: 10px">
                    <textarea type="text" id="txt" placeholder="请输入消息内容......" class="form-control"></textarea>
                </div>
            </div>

            <div class="table">
                <div>

                    <button class="btn btn-success" onclick="sendMsg();">发送</button>
                    &nbsp; &nbsp;
                    <button class="btn btn-danger" onclick="closeLink();" style="margin-left: 74%">断开连接</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 消息模板 -->
    <div id="recordTemplate" class="hide" >
        <div class="right-info">
            <!-- 用户 -->
            <!-- 消息内容 -->
            <pre>

                </pre>
        </div>
    </div>

    <!-- js代码 -->
{#    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>#}
{#   #}
    <script>
        var STATUS; // 是否连接的标志
        var username=get_query_string("username")
        var ws = new WebSocket("ws://127.0.0.1:8001/chat/socket/{{group_number}}/");
        console.log('websocket连接成功！')
        ws.onopen = function () {
            // 客户端在握手环节验证成功之后，自动执行此方法
            console.log("连接成功。")
        };

        ws.onmessage = function msg(event) {
            var $item = $("#recordTemplate").find('.right-info').clone();
            $item.find('pre').html(event.data);
            $("#content").append($item);
        };

        function sendMsg() {
            if (STATUS == false) {
                swal({
                    title: "已断开",
                    text: "当前已断开连接，刷新页面重新连接。"
                });
            } else {
                var title='';
                if ({{ admin }}==0) {
                    title='用户'+username
                }else{
                   title='卖家'
                }

                ws.send(title+':'+$("#txt").val());
                $("#txt").val("");
            }
        }

        function closeLink() {
            ws.close();
            STATUS = false;
            console.log("断开连接");
            swal({
                text: "成功断开连接，刷新页面重新连接。"
            });
        }

        // 获取url路径参数
        function get_query_string(name){
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            return null;
        }
    </script>
</body>
</html>